<template>
  <div class="orderInfo">
    <div class="status">
      <span class="orderSn">订单编号: {{ order.orderSn }} </span>
      <span class="statusName" v-if="!hideStatus">{{ order.orderStatusName }}</span>
    </div>
    <div class="orderItemBox" @click="emits('clickEvent', order)">
      <OrderItem
        v-for="(orderItem, orderItemIndex) in order.orderItems"
        :key="orderItemIndex"
        :orderItem="orderItem"
      />
    </div>
    <div class="totalAmount">
      <span>实付款：</span>
      <nut-price :price="payAmount" size="normal" symbol="¥" />
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from "vue";

// 属性
const props = defineProps({
  order: {
    type: Object,
  },
  hideStatus: {
    type: Boolean,
    default: false
  }
});

// 方法
const emits = defineEmits(["clickEvent"]);

// 实付款
const payAmount = computed(() => {
  var totalAmount = 0
  var orderItems = props.order.orderItems;
  for(var i in orderItems) {
    totalAmount += parseFloat(orderItems[i].totalAmount)
  }
  return totalAmount;
});
</script>

<style lang="less" scoped>
.orderInfo {
  .orderItemBox {
    .orderItem {
      margin-bottom: 15px;
    }
    .orderItem:last-child {
      margin-bottom: 0px;
    }
  }
  .status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0px 15px 0px;
    border-bottom: 1px solid #efefef;
    margin-bottom: 20px;
    .orderSn {
      font-size: 13px;
    }
    .statusName {
      color: #fa2c19;
    }
  }
  .totalAmount {
    margin: 10px 0px 5px 0px;
    display: flex;
    justify-content: flex-end;
    .nut-price {
      color: #000;
      font-weight: bold;
    }
  }
}
</style>